<style lang="scss">
    .my_msg_cnetnt{
        margin-top: 8px;
        padding: 20px 0px 0px 20px;
        height: calc(100vh - 118px);
        width: 100%;
        // border: 2px solid #dcdae2;
        background-color: #FFFFFF;
        .my_msg_list{
            // clear:both;
            // height:auto!important;
            // min-height:80px;
            width: 100%;
        }
    }
    .list-body-content{
        padding: 6px 0 0;
        height: 100%;
        padding: 4px 0;
        overflow: auto;
        border-bottom: 1px dashed #dcdae2;
    }
    .list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        // font-size: 14px !important;
        list-style: none;
        transition: background 0.2s ease-in-out;
        font-size: 13px;
        color: #999999;
 
    }
    .list_span{
        word-wrap:break-word; 
        word-break:break-all; 
        overflow: hidden;
        font-size: 13px;
        color: #999999;
    }
    
</style>
<template>
    <div style="width: 100%;height:calc(100vh - 118px);">
        <div class="my_msg_cnetnt" style="margin-top: 0px;">
            <div style="overflow: auto;height: calc(100vh - 190px)">
                <div class="my_msg_list">
                    <template v-if="showMsg.records!=undefined && showMsg.records.length > 0">
                        <template v-for="(item, index) in showMsg.records">
                            <ul class="list-body-content" :key="index">
                                <div style="width: 80%;float:left;">
                                    <li class="list-content-item">
                                        <span style="font-weight: bold;color: #333333;font-size: 13px;">{{item.title}}</span>
                                    </li>
                                    <li class="list-content-item">
                                        <span v-if="item.type != 2" class="list_span">{{item.des}}</span>
                                        <span v-else class="list_span">{{transTxt(item.des)}}</span>
                                    </li>
                                    <li class="list-content-item">
                                        <span>{{formatTime(item.startTime)}}</span><span style="padding-left: 20px"><Icon type="ios-time-outline" />{{times(item.startTime)}}</span>
                                    </li>
                                </div>
                                <div style="width: 20%;float:left;text-align: center; line-height: 100px;">
                                    <Button @click="showMessageInfo(item)">查看详情</Button>
                                </div>
                            </ul>
                        </template>
                    </template>
                    <ul v-else>
                        <li  class="list-content-item" style="text-align: center;"><span>暂无消息内容</span></li>
                    </ul>
                    
                </div>
            </div>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :current="showMsg.current" :total="showMsg.total"   @on-change="changePage"></Page>
                </div>
            </div>
            <component  ref="msgModal" :is="'msgModal'"  v-model="isshowMsg" :msgInfo="showMsgInfo"></component>
        </div>
    </div>
    
</template>
<script>
    import msgModal from './message_modal'
    import ajax from "../ajax_util"
    import marked from 'marked'
    export default {
        components:{
            msgModal
        },
        data(){
            return{
                isshowMsg: false,
                showMsgInfo: {},
                checkStatus: "all",
                showMsg: {},
                current: 1, // 当前页码
                messageNumber: 10, //每页显示条数

            }
        },
        mounted:function(){
            this.getMySend()
        },
        methods:{
            transTxt(des){
                // return marked(des, { sanitize: true })

                var input = marked(des, { sanitize: true });
                var str = input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
                return str.replace("&gt;"," ");
            },
            //计算时间差
            times(value){
                return this.utils.times(new Date(value).getTime()*1000)

            },
            // 获取全部的消息
            getMySend(){
                var url = this.CONFIG.msg_url + "/my/send" 
                var that=this;
                var params = {
                    current: this.current,
                    pageSize: this.messageNumber
                }
                ajax.get({
                    url: url,
                    that: that,
                    params: params,
                    success:function(data){
                        that.showMsg = data
                    }
                })
            },
            
            formatTime(time){
                return this.utils.formatDate(new Date(time*1000), "yyyy-MM-dd hh:mm")
            },
            // 显示详情窗口
            showMessageInfo(item){
                this.isshowMsg = true
                this.showMsgInfo = item
            },
            // 跳转页面
            changePage(page){
                this.current = page
                this.getMySend()
            }
        }
        
    }
</script>